<template>
  <div class="flex">
    <vue-header title="发布">
      <span slot="right" :class="{ [content ? 'color-theme' : 'color-subtext']: true }" @click="submit">发表</span>
    </vue-header>
    <div class="flex-grow flex-scroll container">
      <div class="com-input-container">
        <textarea v-model.trim="content" placeholder="说点什么吧..."></textarea>
      </div>
      
      <footer>
        <!-- <div class="location">
          <img src="@img/btn/release_icon_location@2x.png" width="10px" class="icon">
          <small class="color-subtext"> 所在位置...</small>
        </div> -->
        <checker class="tags" v-model="type" :radio-required="true"
          default-item-class="tag"
          selected-item-class="selected"
        >
          <checker-item value="2" class="color-danger" 
            :style="{ backgroundColor: type == 2 ? '#FF2841' : '#F7F7F7' }"
          >#话题#</checker-item>
          <checker-item value="1" style="color:#FF7E38"
            :style="{ backgroundColor: type == 1 ? '#FF7E38' : '#F7F7F7' }"
          >#求购#</checker-item>
          <checker-item value="3" class="color-theme"
            :style="{ backgroundColor: type == 3 ? '#FFB100' : '#F7F7F7' }"
          >#二手物品#</checker-item>
        </checker>
        <div class="imgs">
          <img v-for="(url, index) in imgs" :key="index" :src="url"
            @click="$deepToView('picViewer', { params: { url } })" class="uploadedImg"
          >
          <input type="file" accept="image/*" style="position:fixed; left: -9999px;" ref="uploader" @change="imgUploadReady">

          <img src="@img/btn/release_icon_camera@2x.png" @click="upload">
        </div>
      </footer>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import { Checker, CheckerItem } from 'vux'
import upload from '@u/upload.js'
export default {
  components: {
    Checker, CheckerItem
  },

  data (){
    return {
      content: '',
      type: '',
      imgs: [],
    }
  },

  methods: {
    init (){
      this.content = ''
      this.type = ''
      this.imgs = [] 
    },

    // input标签图片ready事件
    imgUploadReady (e){
      var img = e.target.files[0]
      if(!img){ return }
      this.$vux.loading.show()

      upload(img)
      .finally(this.$vux.loading.hide)
      .then(imgUrl => this.imgs.push(imgUrl))
      .catch(e =>{
        console.log(e)
        this.$alert.toast('上传失败，请重试')
      })
    },

    upload (){
      if(this.imgs.length >= 4){
        this.$alert.toast('最多上传四张图片')
      }else{
        this.$refs.uploader.click()
      }
    },

    // 提交发现
    submit (){
      if(!this.content){
        this.$alert.toast('发布的内容不能为空')
        return
      }
      if(!this.type){
        this.$alert.toast('请选择一个标签')
        return
      }

      _api('find/publish', {
        find_type: this.type,
        content: this.content,
        img: this.imgs.join(',')
      }).then(data =>{
        this.$alert.alert('发表成功')
        this.init()
        this.$bus.$emit('home-reload')
        this.$router.replace({ name: 'index/finds', params: { reload: true } })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  background-color: white;
  padding: 10px 20px;
}
.com-input-container{
  height: 150px;
  font-size: 16px;
}

.location{
  margin-bottom: 15px;

  > *{
    vertical-align: middle;
  }
}

.tags{
  border-top: 1px #eee solid;
  border-bottom: 1px #eee solid;
  padding: 20px 0;
  font-size: 14px;

  .tag{
    display: inline-block;
    padding: 7px 12px;
    background-color: #F7F7F7;
    border-radius: 20px;
    margin: 5px 10px;

    &.selected{
      color: white !important;
    }
  }
}

.imgs{
  margin-top: 10px;

  img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px #ccc dashed;
    margin-top: 10px;
    margin-left: 10px;
  }
}
</style>